<template>
  <div class="zx-select">
    <input type="text" :placeholder="place" v-model="currentValue" @click="showBool=true" style="display:none">
    <div class="form-input-wrap" @click="showBool=true">
      <div class="form-input">
        <span v-if="currentLabel!=''">{{currentLabel}}</span>
        <span v-else style="color: RGBA(151, 151, 151, 1);">{{place}}</span>
      </div>
    </div>
    <div class="zx-option-mask" v-show="showBool" @click="showBool=false">
      <div class="zx-option-cont">
        <slot></slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'zx-select',
  data() {
    return {
      currentValue: this.value,
      showBool: false,
      currentLabel: ''
    };
  },
  props: {
    place: {
      type: String
    },
    value: [String, Number]
  },
  computed: {
    inputText() {
      return this.currentLabel ? this.currentLabel : this.place;
    }
  },
  watch: {
    currentValue() {
      this.$emit('input', this.currentValue);
      this.$emit('change', this.currentValue);
    },
    value() {
      this.currentValue = this.value;
    },
    showBool(value) {
      if (value) {
        this.lockScroll();
      } else {
        this.unLockScroll();
      }
    }
  },
  provide() {
    return {
      'select': this
    };
  },
  // inject: ['select'],
  methods: {
    handleOptionSelect(option) {
      this.currentValue = option.value;
    },
    unLockScroll() {
      window.onmousewheel = function(event) {
        return true;
      };
    },
    lockScroll() {
      window.onmousewheel = function(event) {
        return false;
      };
    }
  },
  created() {
    this.$on('handleOptionClick', this.handleOptionSelect);
  }
};
</script>
<style lang="scss" scoped>
  .zx-option {
    padding: 5px 0;
    font-size: 14px;
  }

  .zx-option-mask {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 99;
    background: rgba(0, 0, 0, 0.1);
    .zx-option-cont {
      width: 80%;
      min-height: 100px;
      border-radius: 4px;
      transform: translate(-50%, -50%);
      position: absolute;
      left: 50%;
      top: 50%;
      background: white;
      /* padding: 10px; */
    }
  }

  .form-input-wrap {
    display: flex;
    height: 3.5rem;
    line-height: 3.5rem;
    background: white;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      right: 10px;
      top: 13px;
      height: 10px;
      width: 10px;
      /* border-right: 8px solid transparent; */
      border-top: 2px solid #019dfa;
      border-right: 2px solid #019dfa;
      transform: rotate(135deg)
    }
    .form-input {
      border: none;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      padding-left: .8rem;
      font-size: 1.2rem;
      /* -webkit-box-shadow: 0 6px 10px rgba(204, 204, 204, 0.16);
            box-shadow: 0 6px 10px rgba(204, 204, 204, 0.16); */
    }
  }
</style>